<template>
	<div>
		
	    <Row :gutter="16">
	        <Col span="4" style="border-right: 1px dotted #e9eaec">
	            <div>
                    
	            	<Tree :data="baseData" @on-select-change="changeSelectNews"></Tree>
	            	<Button type="primary" @click="addNews" class="p2"><Icon type="android-person-add" style="margin-right:10px;"></Icon>选择类型添加新闻</Button>
	            </div>
	        </Col>
	        <Col span="20">
	            <div>
                    <Input v-model="filter.cate" class="p1" style="width:300px;display: none;">
                        <Button slot="append" icon="ios-search"  @click="search"></Button>
                    
                    </Input>
	            	<Button @click="handleSelectAll(true)" type="primary" class="p1"><Icon type="checkmark-circled" style="margin-right:10px;"></Icon>设置全选</Button>
            		<Button @click="handleSelectAll(false)" type="primary" class="p1"><Icon type="android-cancel" style="margin-right:10px;"></Icon>取消全选</Button>
            		<Button type="warning" class="p2" @click="deleSelect"><Icon type="ios-trash" style="margin-right:10px;"></Icon>删除选中</Button>
	            	<Table border ref="selection" :columns="columnsNews" :data="list"   @on-selection-change="changeS"></Table>
	            	<!-- <Page :total="filter.total" show-elevator show-total show-sizer   :page-size="filter.limit" style="margin:20px 0 80px 0;"  ></Page> -->
                    <Page :total="filter.total" show-elevator show-total show-sizer @on-change="changePage" @on-page-size-change="onPageSizeChange"  :page-size="filter.limit" style="margin:20px 0 80px 0;"  ></Page>

					<Modal
			            v-model="modal1"
			            width="800"
			            title="普通的Modal对话框标题"
			            @on-ok="ok"
			            @on-cancel="cancel">
			            <Form ref="formValidateNews" :model="formValidateNews"  :label-width="80">
			                <FormItem label="标题" prop="title" style="width: 500px;">
			                    <Input v-model="formValidateNews.title" placeholder="请输入" ></Input>
			                </FormItem>
			                <FormItem label="ID" prop="id" style="width: 500px;display: none">
			                    <Input v-model="formValidateNews.id" placeholder="请输入" ></Input>
			                </FormItem>
			                <FormItem label="类型" prop="cate" style="width: 300px;" >
			                    <Input disabled v-model="formValidateNews.cate" placeholder="请输入"></Input>
			                </FormItem>
			                <FormItem label="作者" prop="author" style="width: 300px;">
			                    <Input v-model="formValidateNews.author" placeholder="请输入"></Input>
			                </FormItem>
			                <FormItem label="类型id" prop="cateId" style="width: 300px;display: none;">
			                    <Input v-model="formValidateNews.cateId" placeholder="请输入"></Input>
			                </FormItem>
			                <FormItem label="发布日期" prop="date">
			                    <DatePicker type="date" placeholder="选择日期" v-model="formValidateNews.date"></DatePicker>
			                    <TimePicker type="time" placeholder="选择时间" v-model="formValidateNews.time"></TimePicker>
			                </FormItem>
			                <FormItem label="内容" prop="content">
			                	<quill-editor ref="myTextEditor" v-model="formValidateNews.content" :config="editorOption"></quill-editor>
			                </FormItem>
			                <FormItem>
			                    <Button type="primary" @click="handleSubmit('formValidateNews')">提交</Button>
			                    <Button type="ghost" @click="handleReset('formValidateNews')" style="margin-left: 8px">重置</Button>
			                </FormItem>
			            </Form>
			        </Modal>

			        <Modal
				        v-model="modal4"
				        title="新闻"
				        ok-text="退出查看"
                        width="800">
				        <h3 v-model="searchTitle">{{searchTitle}}</h3>
				        <p v-model="searchAuthor">作者:{{searchAuthor}}</p>
				        <p v-model="searchCate">类型:{{searchCate}}</p>
				        <p v-model="searchTime">发布时间:{{searchTime}}</p>
				        <div v-html="searchContent">{{searchContent}}</div>
                        
                        <ul style="margin:48px 0 10px 0;border:2px dashed #dddee1;background-color:#f8f8f9">
                            <template v-for="item in items">
                                 <li v-if="formValidateComment.newsID==item.newsID"style="margin: 20px;border-bottom: 1px dotted #e9eaec">
                                     <div v-model="item.date">
                                         {{getTime(item.date)}}
                                     </div>
                                     <div>
                                         <Rate disabled show-text allow-half v-model="item.rate" >
                                            <span style="color: #f5a623">{{ item.rate }}</span>
                                        </Rate>
                                     </div>
                                     <div v-html="item.content" style="margin-top:20px;"></div>
                                 </li>
                            </template>      
                        </ul>


                        <Form ref="formValidateComment" :model="formValidateComment"  :label-width="80" style="border:1px double #dddee1">
                            <FormItem label="评分" prop="rate">
                                <Rate show-text allow-half v-model="formValidateComment.rate" style="margin-top:50px;">
                                    <span style="color: #f5a623">{{ formValidateComment.rate }}</span>
                                </Rate>
                            </FormItem>
                            <FormItem label="新闻ID" prop="author" style="width: 300px;display: none;">
                                <Input v-model="formValidateComment.newsID" placeholder="请输入"></Input>
                            </FormItem>
                            <FormItem label="内容" prop="content">
                                <quill-editor ref="myTextEditor" v-model="formValidateComment.content" :config="editorOption"></quill-editor>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="commentSubmit('formValidateComment')">提交评论</Button>
                                <Button type="ghost" @click="commentReset('formValidateComment')" style="margin-left: 8px">清空评论</Button>
                            </FormItem>
                        </Form>
				    </Modal> 
	            </div>
	        </Col>
	    </Row>
	</div>
</template>
<script>
	import Base from '../../common/Base.js';

	export default{
		mixins:[Base],
		data(){
			return{
                items: [],//评论内容存储
				modal4:false,//弹窗
				module:'news',
				// NewsList:[],
            	editorOption: {},
            	searchTitle:'',
            	searchContent:'',
            	searchCate:'',
            	searchTime:'',
            	searchAuthor:'',
            	formValidateNews:{//新闻表格内容
            		title:'',
            		content:'',
            		cate:'',
            		cateId:'',
            		date:'',
            		time:'',
            		author:'',
            		id:''
            	},
                formValidateComment:{//新闻评论内容
                    content:'',
                    rate:5.0,
                    newsID:''
                },
            	columnsNews:[
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '作者',
                        key: 'author',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.author)
                            ]);
                        }
                    },
                    {
                        title: '标题',
                        key: 'title',
                        width:200
                    },
                    {
                        title: '类型',
                        key: 'cate'
                    },
                    {
                        title: '评论数',
                        key: 'commentCount'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 220,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                            	h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        icon:'search'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {//将信息传递给弹窗查看消息
                                        	this.searchTitle=params.row.title;
                                        	this.searchContent=params.row.content;
                                        	this.searchCate=params.row.cate;
                                        	this.searchTime=this.getTime(params.row.time);
                                        	this.searchAuthor=params.row.author;
                                            this.modal4=true;
                                            this.formValidateComment.newsID=params.row._id;
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        icon:'edit'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {//编辑，传给编辑框
                                            this.modal1=true;
                                            this.formValidateNews.title=params.row.title;
                                            this.formValidateNews.content=params.row.content;
                                            this.formValidateNews.cate=params.row.cate;
                                            this.formValidateNews.cateId=params.row.cateId;
                                            this.formValidateNews.time=params.row.time;
                                            this.formValidateNews.date=params.row.date;
                                            this.formValidateNews.author=params.row.author;
                                            this.formValidateNews.id=params.row._id;
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        icon:'android-cancel'
                                    },
                                    on: {
                                        click: () => {
                                           this.$http({//获取id并删除改表单
                                                method:'DELETE',
                                                url:'http://localhost:3000/news/data/'+params.row._id
                                            }).then((res)=>{
                                                this.loadmsg();
                                            });
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ]
			}
		},
		methods:{
	 		changeS(selection){
	 			this.arr=[];
	            for(var i=0;i<selection.length;i++){
	                this.arr.push(selection[i]._id)
	            }
	 		},
			deleSelect(){//删除选中按钮arr里的id
                var len=this.arr.length;
                for(var i=0;i<len;i++){
                    this.$http({//获取id并删除改表单
                        method:'DELETE',
                        url:'http://localhost:3000/news/data/'+this.arr[i]
                    }).then((res)=>{
                        this.loadmsg();
                    });
                }
                
            },
            ok () {
                this.$Message.info('点击了确定');
            },
            cancel () {//取消表单时候清空表单内容
                this.$Message.info('点击了取消');
            },
            changeSelectNews(select){//树节点加载，并点击显示相应的类型
            	this.formValidateNews.cate=select[0].title;
            	this.formValidateNews.cateId=select[0]._id;
                this.filter.cate=select[0].title;
                if(this.filter.cate!=''){
                    this.loadmsg();
                }
            },
            addNews(){//选中新闻类型后添加类型
            	if(this.formValidateNews.cateId==''){
            		this.$Message.info('请选新闻择类型后在添加');
            	}else{
            		this.modal1=true;
            	}
            },
            clear(){//操控编辑框
            	this.formValidateNews.title='';
            	this.formValidateNews.content='';
            	this.formValidateNews.cate='';
            	this.formValidateNews.cateId='';
            	this.formValidateNews.date='';
            	this.formValidateNews.time='';
            	this.formValidateNews.author='';
            },
            handleSubmit (name) {//弹窗添加新闻或者修改新闻
                this.$refs[name].validate((valid) => {
                    if (valid) {
                    	if(this.formValidateNews.id==''){
	                        this.$http({
	                        	method:'POST',
	                        	url:'http://localhost:3000/news/data',
	                        	data:this.formValidateNews
	                        }).then(res=>{;
	                        	this.$Message.success('提交成功!');
	                        	this.loadmsg();
	                       		this.modal1=false;
	                       		this.clear();
	                        });
	                    }else{
	                    	this.$http({
                                method:'POST',
                                url:'http://localhost:3000/news/data/'+this.formValidateNews.id,
                                data:this.formValidateNews
                            }).then((res)=>{
                                this.modal1 = false;
                                this.$Message.success('提交成功!');
                                this.loadmsg();
                            });
	                    }    
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            commentSubmit (name) {//评论添加
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$http({
                            method:'POST', 
                            url:'http://localhost:3000/comment/data',
                            data:this.formValidateComment
                        }).then(res=>{
                            this.formValidateComment.content='';
                            this.loadComment();
                            this.loadmsg();
                        }) 
                    } else {
                        this.$Message.error('提交失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            commentReset (name) {
                this.$refs[name].resetFields();
            },
            loadComment(){
                this.$http({
                    url:'http://localhost:3000/comment/list',
                    method:'post'
                }).then(res=>{
                    this.items=res.data.limit;
                });
            }

		},
		created(){
			this.$http({
				url:'http://localhost:3000/cate/list/1',
				method:'get'
			}).then(res=>{
				this.baseData=res.data;
			});
			this.loadmsg();
            this.loadComment();
		}
	}
</script>
<style scoped>
	.contents{
		background-color:red; 
	}
</style>